/* popover style */
#popover {
  min-width: 100px;
  min-height: 30px;
  position: absolute;
  padding: 20px;
  border: 1px solid #ddd;
  color: #333;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
  .popover-arrow {
    display: block;
    position: absolute;
    background: #fff;
    width: 10px;
    height: 10px;
    border: 1px solid transparent;
    &.top { 
      left: 50%;
      border-top-color: #ddd;
      border-left-color: #ddd;
      transform: translateX(-50%) rotate(45deg);
      top: -6px;
      box-shadow: -1px -1px 1px rgba(0,0,0,.06);
    }
    &.bottom {
      left: 50%;
      border-bottom-color: #ddd;
      border-right-color: #ddd;
      transform: translateX(-50%) rotate(45deg);
      bottom: -6px;
      box-shadow: 1px 1px 1px rgba(0,0,0,.06);
    }
  }
  .popover-wrapper {
    .title {
      margin-bottom: 20px;
    }
    .slot-scope {
      margin-left: 10px;
    }
    .footer {
      margin-top: 30px;
      text-align: left;
      div {
        display: inline-block;
        font-size: 12px;
        white-space: nowrap;
        height: 25px;
        line-height: 25px;
        padding: 0 15px;
        border: 1px solid transparent;
        outline: none;
        cursor: pointer;
        &:not(:first-child) {
          margin-left: 10px;
        }
        &.comfirm-btn {
          color: #fff;
          background: #333;
        }
        &.cancel-btn {
          color: #333;
          background: #fff;
          border-color: #333;
          &:hover {
            color: #fff;
            background: #333;
          }
        }
      }
    }
  }
}